<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="22">
          <el-select v-model="atype" placeholder="所有类型" style="width:120px;" @change="handleFilter">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="aword" placeholder="敏感词" style="width:120px;" @change="handleFilter">
            <el-option
              v-for="item in word"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-model="keyWord" placeholder="搜索关键字" style="width:200px" @keyup.enter.native="handleFilter"/>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" style="float:right;" @click="dialog = true; form = { type: 'noSee' }">新增敏感词</el-button>
        </el-col>
      </el-row>
    </section>
    <subtable
      :table-label="sensitiveLabel"
      :table-data="sensitiveData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="button" :min-width="100" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteDictionary(scope.row)">删除</el-button>
          <el-button v-if="scope.row.type === 'noSee'" type="primary" @click="updateDictionary(scope.row)">禁用</el-button>
          <el-button v-if="scope.row.type === 'forbidden'" type="primary" @click="updateDictionary(scope.row)">屏蔽</el-button>
        </template>
      </el-table-column>
    </subtable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog v-if="dialog" :visible.sync="dialog" title="新增敏感词" width="580px">
      <el-form ref="createInfo" :model="form" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="敏感词" prop="name" >
          <el-input :rows="12" v-model="form.name" type="textarea" style="width:300px;"/>
          <p style="margin:0;font-size:14px;color:#8a8a8a;">换行可一次新增多个敏感词</p>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="敏感词类型" >
          <el-radio v-model="form.type" label="noSee">屏蔽</el-radio>
          <el-radio v-model="form.type" label="forbidden">禁用</el-radio>
          <p v-if="form.type === 'noSee'" style="margin:0;font-size:14px;color:#8a8a8a;">选择屏蔽，会将指定敏感词替换为"*"。</p>
          <p v-if="form.type === 'forbidden'" style="margin:0;font-size:14px;color:#8a8a8a;">选择禁用，将无法保存。</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Subtable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import { getDictionaryItemList, addDictionary, updateDictionary, deleteDictionary } from '@/api/operate/dictionaryItem' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Subtable,
    Pagination
  },
  data() {
    return {
      form: {
        name: '',
        type: 'noSee'
      },
      formLabelWidth: '120px',
      dialog: false,
      total: 0,
      currentpage: 1,
      pagesize: 10,
      sensitiveLabel: [
        {
          label: '编号',
          width: '',
          prop: 'id'
        },
        {
          label: '敏感词',
          width: '',
          prop: 'name'
        },
        {
          label: '类型',
          width: '',
          prop: 'typeStr'
        },
        {
          label: '屏蔽次数',
          width: '',
          prop: 'weight'
        },
        {
          label: '新增时间',
          width: '',
          prop: 'createTimeStr'
        }
      ],
      sensitiveData: [],
      listFilter: [],
      keyWord: '',
      aword: '',
      atype: '',
      word: [
        {
          label: '敏感词',
          value: '敏感词'
        },
        {
          label: '编号',
          value: '编号'
        }
      ],
      type: [
        {
          label: '所有类型',
          value: ''
        },
        {
          label: '禁用',
          value: 'forbidden'
        },
        {
          label: '屏蔽',
          value: 'noSee'
        }
      ],
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    deleteDictionary(row) {
      this.$confirm('确认要删除该敏感词', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionary(row.id).then(res => {
          this.$notify({
            title: '成功',
            message: '敏感词已删除',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    },
    updateDictionary(row) {
      if (row.type === 'forbidden') {
        row.type = 'noSee'
      } else {
        row.type = 'forbidden'
      }
      updateDictionary(row).then(res => {
        this.$notify({
          title: '成功',
          message: '敏感词修改成功！',
          type: 'success',
          duration: 2000
        })
        this.getData()
      })
    },
    saveInfo() {
      this.$refs.createInfo.validate((valid) => {
        if (valid) {
          this.form.tenantId = getTenantId()
          addDictionary(this.form).then(res => {
            this.$notify({
              title: '成功',
              message: '新增敏感词成功！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
          this.dialog = false
        }
      })
    },
    handleFilter() {
      this.sensitiveData = this.listFilter.filter(item => {
        if (this.atype && item.type !== this.atype) return false
        if (this.aword === '敏感词' && item.name.toLocaleLowerCase().indexOf(this.keyWord.toLocaleLowerCase()) === -1) return false
        if (this.aword === '编号' && item.id.toString().toLocaleLowerCase().indexOf(this.keyWord.toLocaleLowerCase()) === -1) return false
        return true
      })
      this.total = this.sensitiveData.length
    },
    clearParams() {
      this.atype = ''
      this.aword = ''
      this.keyWord = ''
      this.getData()
    },
    getData() {
      getDictionaryItemList().then(response => {
        this.sensitiveData = response.data.items.filter(item => {
          if (item.tenantId !== getTenantId()) return false
          return true
        })
        this.sensitiveData.map(item => {
          if (item.type === 'forbidden') item.typeStr = '禁用'
          if (item.type === 'noSee') item.typeStr = '屏蔽'
          if (item.createTime) item.createTimeStr = new Date(item.createTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
        })
        this.total = this.sensitiveData.length
        this.listFilter = this.sensitiveData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allsearch {
  margin-top: 0;
  padding: 0;
  .search-content {
    width: 100%;
  }
}
</style>
